<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-row>
        <el-col :span="10">
          <el-button class="filter-item" size="small" style="margin-left: 10px;" type="primary" v-waves
                     @click="outboundShip" icon="el-icon-check">出库确认
          </el-button>
          <el-button class="filter-item" size="small" style="margin-left: 10px;" type="primary" v-waves
                     @click="scanOutShip" icon="el-icon-view">扫码出库
          </el-button>
          <!--<el-button class="filter-item" size="small" style="margin-left: 10px;" type="primary" v-waves-->
                     <!--@click="quitOutShip" icon="el-icon-edit">备料退库-->
          <!--</el-button>-->
        </el-col>
        <el-col :span="14" style="text-align: right">
          <el-input size="small" style="width: 200px" class="filter-item more-search" placeholder="车架号"
                    v-model="search.condition.lotNo1"
                    @keyup.enter.native="list"></el-input>
          <el-button class="filter-item" size="small" type="primary" v-waves icon="el-icon-circle-plus-outline"
                     @click="moreClick">更 多
          </el-button>
          <el-dropdown trigger="click" :hide-on-click=false style="float: right;margin-left: 10px">
            <span class="el-dropdown-link">
              <el-button class="filter-item" size="small" type="primary" v-waves>
                选择列
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-checkbox-group v-model="columnCheckList">
                  <el-checkbox label="noticeHeadNo">通知单号</el-checkbox>
                  <el-checkbox label="houseName">仓库</el-checkbox>
                  <el-checkbox label="ownerId">客户</el-checkbox>
                  <el-checkbox label="ownerOrderNo">订单号</el-checkbox>
                  <el-checkbox label="noticeLineStatus">出库状态</el-checkbox>
                  <el-checkbox label="prepareStatus">备料状态</el-checkbox>
                  <el-checkbox label="materielId">车型名称</el-checkbox>
                  <el-checkbox label="lotNo1">车架号</el-checkbox>
                  <el-checkbox label="materielName">车型描述</el-checkbox>
                  <el-checkbox label="loadingArea">备车道</el-checkbox>
                  <el-checkbox label="destLocationName">目的地</el-checkbox>
                  <el-checkbox label="shipmentTime">调度时间</el-checkbox>
                  <el-checkbox label="carrierName">承运商</el-checkbox>
                  <el-checkbox label="plateNumber">车牌</el-checkbox>
                  <el-checkbox label="driverName">司机</el-checkbox>
                  <el-checkbox label="driverPhone">司机手机号</el-checkbox>
                </el-checkbox-group>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
      <div style="clean:both"></div>
      <!--更多内容-->
      <div v-show="moreSearchVisible"  style="height: auto;margin-top: 10px;">
        <el-form ref="form" :model="search.condition" label-width="120px" :inline="true">
          <el-form-item label="车架号">
            <!--<el-input placeholder="请输入车架号" class="w200" clearable v-model="search.condition.lotNo1"></el-input>-->
            <el-input type="textarea" :rows="2" style="width: 250px"
                      v-model="search.condition.lotNo1"  placeholder="请输入车架号, 以逗号来分隔"></el-input>
          </el-form-item>
          <el-form-item label="客户订单号">
            <el-input placeholder="请输入客户订单号" class="w200" clearable v-model="search.condition.ownerOrderNo"></el-input>
          </el-form-item>
          <el-form-item label="出库">
            <el-select v-model="search.condition.noticeLineStatus" placeholder="出库状态">
              <el-option label="未选择" value=""></el-option>
              <el-option label="未出库" value="10"></el-option>
              <el-option label="部分出库" value="20"></el-option>
              <el-option label="全部出库" value="30"></el-option>
              <el-option label="关闭出库" value="40"></el-option>
              <el-option label="取消出库" value="50"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="list" style="margin-left: 10px">查询</el-button>
            <el-button type="primary" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!--列表-->
    <el-table ref="outboundShipTable" :data="outboundShipList" v-loading="listLoading" element-loading-text="加载中"
              @selection-change="handleSelectionChange"
              border fit highlight-current-row style="width: 100%;margin-top:5px">
      <el-table-column type="selection" width="35"></el-table-column>
      <el-table-column :key="key" align="center" :width="value.width" v-for='(value,key) in columnList'
                       :label="value.title">
        <template slot-scope="scope">
          <div v-if="value.key === 'noticeLineStatus'">{{scope.row[value.key] | noticeLineStatusFilter}}</div>
          <div v-else-if="value.key === 'prepareStatus'">{{scope.row[value.key] | prepareLineStatusFilter}}</div>
          <div v-else>{{ scope.row[value.key] }}</div>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination :current-page.sync="search.current" :page-sizes="[10,20,30,50]" @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :page-size="search.size" :total="search.total"
                     layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    </div>
    <!--扫码出库弹窗-->
    <el-dialog title="扫码出库" width="800px" :visible.sync="dialogVisible" @close="handleClose">
      <hr>
      <el-row>
        <el-col style="width: 120px;text-align: right;margin-right: 10px;line-height: 32px;height: 32px;">车架号(vin)
        </el-col>
        <el-input placeholder="vin码-回车查询" v-model="scanQueryParams.lotNo1"
                  style="margin-right: 10px;width: 200px" clearable @keyup.enter.native="getOutShipInfoScan"/>
        <el-input v-model="scanOutParams.noticeLineId" v-show="false"></el-input>
        <span>
          <el-button type="primary" :disabled="scanOutParams.noticeLineStatus === '30' || buttonEnable"
                     @click="confirmOutShip">出库确认</el-button>
        </span>
      </el-row>
      <hr>
      <el-form ref="outShipForm" :model="scanOutParams" label-width="120px" :inline="true">
        <el-form-item label="订单号: ">
          <div class="w200 printBig">{{isBlank(scanOutParams.noticeHeadSourceNo)}}</div>
        </el-form-item>
        <el-form-item label="VIN: ">
          <div class="w200 printBig">{{isBlank(scanOutParams.lotNo1)}}</div>
        </el-form-item>
        <el-form-item label="车型/物料代码:">
          <div class="w200 printBig">{{isBlank(scanOutParams.lotNo1)}}</div>
        </el-form-item>
        <el-form-item label="货主: ">
          <div class="w200 printBig">{{isBlank(scanOutParams.ownerId)}}</div>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--备料退库弹窗-->
    <el-dialog title="备料退库" width="50%" :visible.sync="quitDialogVisible" @close="handleQuitClose">
      <hr>
      <el-row>
        <el-col style="width: 120px;text-align: right;margin-right: 10px;line-height: 32px;height: 32px;">车架号(vin)
        </el-col>
        <el-input placeholder="vin码-回车查询" v-model="quitQueryParams.lotNo1"
                  style="margin-right: 10px;width: 200px" clearable @keyup.enter.native="getQuitInfo"/>
        <span>
          <el-button type="primary" :disabled="quitParams.noticeLineStatus !== '50' && quitEnable"
                     @click="confirmQuitShip">确认退库</el-button>
        </span>
      </el-row>
      <hr>
      <el-form ref="outShipForm" :model="quitParams" label-width="120px" :inline="true">
        <el-form-item label="订单号: ">
          <div class="w200 printBig">{{isBlank(quitParams.ownerOrderNo)}}</div>
        </el-form-item>
        <el-form-item label="VIN: ">
          <div class="w200 printBig">{{isBlank(quitParams.lotNo1)}}</div>
        </el-form-item>
        <el-form-item label="车型/物料代码:">
          <div class="w200 printBig">{{isBlank(getQuitVehicle())}}</div>
        </el-form-item>
        <el-form-item label="货主: ">
          <div class="w200 printBig">{{isBlank(quitParams.ownerId)}}</div>
        </el-form-item>
        <el-form-item label="出库时间: ">
          <div class="w200 printBig">{{isBlank(quitParams.gmtCreate)}}</div>
        </el-form-item>
        <el-form-item label="选择入库库区">
          <el-select class="w200" v-model="selectArea.storeAreaId" @change="areasChange" placeholder="请选择库区">
            <el-option v-for="sArea in areaList" :label="sArea.storeAreaName" :value="sArea.storeAreaId"
                       :key="sArea.storeAreaId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择入库库位">
          <el-select class="w200" v-model="selectArea.locationId" placeholder="请选择库位">
            <el-option v-for="sLocation in storeLocationList" :label="sLocation.name" :value="sLocation.id"
                       :key="sLocation.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  import * as outboundShipAPI from '@/api/outbound/outboundShip'
  import waves from '@/directive/waves' // 水波纹指令
  const defaultColumn = [
    { key: 'noticeHeadNo', title: '通知单号', width: '' },
    { key: 'houseName', title: '仓库', width: '' },
    { key: 'ownerId', title: '客户', width: '' },
    { key: 'ownerOrderNo', title: '订单号', width: '' },
    { key: 'noticeLineStatus', title: '出库状态', width: '' },
    { key: 'prepareStatus', title: '备料状态', width: '' },
    { key: 'materielId', title: '车型名称', width: '' },
    { key: 'lotNo1', title: '车架号', width: '' },
    { key: 'materielName', title: '车型描述', width: '' },
    { key: 'loadingArea', title: '备车道', width: '', fixed: 'right' },
    { key: 'destLocationName', title: '目的地', width: 150 },
    { key: 'shipmentTime', title: '调度时间', width: 150 },
    { key: 'carrierName', title: '承运商', width: 210 },
    { key: 'plateNumber', title: '车牌', width: '' },
    { key: 'driverName', title: '司机', width: '' },
    { key: 'driverPhone', title: '司机手机号', width: '' }
  ]

  export default {
    directives: {
      waves
    },
    data() {
      return {
        search: {
          current: 1,
          size: 10,
          total: 0,
          condition: {
            lotNo1: null,
            ownerOrderNo: null,
            noticeLineStatus: null,
            houseId: null
          }
        },
        columnList: defaultColumn,
        columnCheckList: [
          'noticeHeadNo',
          'houseName',
          'ownerId',
          'ownerOrderNo',
          'noticeLineStatus',
          'prepareStatus',
          'materielId',
          'lotNo1',
          'materielName',
          'loadingArea'
        ],
        moreSearchVisible: false,
        outboundShipList: [],
        listLoading: false,
        selectionOutboundShip: [],
        tableData: [],
        tableHeader: [],
        multipleSelection: [],
        dialogVisible: false,
        scanOutParams: {},
        scanQueryParams: {
          lotNo1: null
        },
        buttonEnable: false,
        quitDialogVisible: false,
        selectArea: {
          areaId: '',
          locationId: ''
        },
        areaList: [{
          storeLocationList: [],
          storeAreaId: null,
          storeAreaName: null
        }],
        storeLocationList: [],
        quitParams: {},
        quitQueryParams: {
          lotNo1: null
        },
        quitEnable: false
      }
    },
    created() {
      this.list()
    },
    watch: {
      columnCheckList(valArr) {
        this.columnList = defaultColumn.filter(v => {
          for (let i = 0; i < valArr.length; i++) {
            if (v.key === valArr[i]) {
              return v
            }
          }
        })
      }
    },
    methods: {
      list() {
        const that = this
        // 更多
        const queryParam = {}
        that.search.condition.houseId = this.$store.getters.currentStorehouse.id
        if (this.moreSearchVisible) {
          queryParam.condition = that.search.condition
        } else {
          queryParam.condition = {
            lotNo1: that.search.condition.lotNo1,
            houseId: this.$store.getters.currentStorehouse.id
          }
        }
        // 分页
        queryParam.current = this.search.current
        queryParam.size = this.search.size
        this.listLoading = true
        outboundShipAPI.getOutboundShipList(queryParam).then(result => {
          if (result.code === 0) {
            this.outboundShipList = result.data.records
            this.search.total = result.data.total
            that.listLoading = false
          }
        })
      },
      scanOutShip() {
        this.dialogVisible = true
      },
      getOutShipInfoScan() {
        const queryParam = {}
        queryParam.lotNo1 = this.scanQueryParams.lotNo1
        queryParam.houseId = this.$store.getters.currentStorehouse.id
        outboundShipAPI.getOutShipInfoScan(queryParam).then(result => {
          if (result.code === 0) {
            this.scanOutParams = result.data
          }
        })
      },
      confirmOutShip() {
        const queryParam = {}
        queryParam.noticeLineId = this.scanOutParams.noticeLineId
        queryParam.houseId = this.$store.getters.currentStorehouse.id
        this.buttonEnable = true
        outboundShipAPI.confirmOutboundScan(queryParam).then(result => {
          this.buttonEnable = false
          if (result.code === 0) {
            this.buttonEnable = true
            this.$message({
              type: 'info',
              message: '出库确认成功',
              duration: 2000
            })
          }
        }).catch(() => {})
      },
      isBlank(val) {
        if (val) {
          return val
        } else {
          return '暂无信息'
        }
      },
      getQuitVehicle() {
        if (this.quitParams) {
          const lineInfo = this.quitParams
          if (lineInfo.materielCode) {
            return lineInfo.materielCode
          } else if (lineInfo.materielName) {
            return lineInfo.materielName
          } else {
            return ''
          }
        }
      },
      outboundShip() {
        this.$confirm('确认对选中项目出库?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.outboundShipConfirm()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作',
            duration: 2000
          })
        })
      },
      outboundShipConfirm() {
        const that = this
        const selectIds = []
        for (let i = 0; i < that.multipleSelection.length; i++) {
          selectIds.push(that.multipleSelection[i].noticeLineId)
        }
        const ids = selectIds.join(',')
        const param = {
          noticeLineIds: ids
        }
        this.listLoading = true
        outboundShipAPI.outboundShipConfirm(param).then(result => {
          that.listLoading = false
          if (result.code === 0) {
            this.$message({
              message: result.message,
              type: 'info',
              duration: 2000
            })
            this.list()
          }
        }).catch(() => {
          that.listLoading = false
        })
      },
      quitOutShip() {
        if (this.multipleSelection) {
          if (this.multipleSelection.length > 1) {
            this.$message({
              type: 'error',
              message: '不支持多选操作',
              duration: 2000
            })
          } else {
            this.quitQueryParams.lotNo1 = this.multipleSelection[0].lotNo1
            this.quitDialogVisible = true
            this.queryUsableLocation()
          }
        } else {
          this.$message({
            type: 'error',
            message: '请选择要备料退库数据',
            duration: 2000
          })
        }
      },
      getQuitInfo() {
        const queryParam = {}
        queryParam.houseId = this.$store.getters.currentStorehouse.id
        queryParam.lotNo1 = this.quitQueryParams.lotNo1
        this.quitEnable = true
        outboundShipAPI.getOutboundShipInfoForQuit(queryParam).then(result => {
          this.quitEnable = false
          if (result.code === 0) {
            this.quitParams = result.data
          }
        })
      },
      queryUsableLocation() {
        const queryParam = {}
        queryParam.houseId = this.$store.getters.currentStorehouse.id
        outboundShipAPI.getUseAbleLocation(queryParam).then(result => {
          if (result.code === 0) {
            this.areaList = result.data
          } else {
            this.$message({
              message: result.message,
              type: 'error',
              duration: 2000
            })
          }
        })
      },
      areasChange(val) {
        for (let i = 0; i < this.areaList.length; i++) {
          if (this.areaList[i].storeAreaId === this.selectArea.storeAreaId) {
            this.storeLocationList = this.areaList[i].storeLocationList
            break
          } else {
            this.storeLocationList = []
          }
        }
      },
      confirmQuitShip() {
        const params = {}
        params.noticeLineId = this.quitParams.noticeLineId
        params.houseId = this.$store.getters.currentStorehouse.id
        params.locationId = this.selectArea.locationId
        this.quitEnable = false
        outboundShipAPI.updateOutboundShipQuit(params).then(result => {
          this.quitEnable = true
          if (result.code === 0) {
            this.$message({
              message: result.message,
              type: 'info',
              duration: 2000
            })
            this.handleQuitClose()
            this.list()
          }
        })
      },
      handleClose() {
        // 关闭
        this.dialogVisible = false
        this.scanOutParams = {}
        this.scanQueryParams = {}
        this.list()
      },
      handleQuitClose() {
        this.quitDialogVisible = false
        this.selectArea.areaId = null
        this.selectArea.locationId = null
        this.quitParams = {}
        this.quitQueryParams = {
          lotNo1: null
        }
        this.areaList = [{
          storeLocationList: [],
          storeAreaId: null,
          storeAreaName: null
        }]
        this.storeLocationList = []
        this.list()
      },
      handleSizeChange(val) {
        // 分页size变化
        this.search.size = val
        this.list()
      },
      handleCurrentChange(val) {
        // 分页当前页变化
        this.search.current = val
        this.list()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      reset() {
        this.search.current = 1
        this.search.size = 10
        this.search.condition = {
          lotNo1: null,
          noticeHeadSourceNo: null,
          noticeHeadNo: null,
          prepareStatus: null
        }
        this.list()
      },
      moreClick() {
        this.moreSearchVisible = !this.moreSearchVisible
      },
      selected(data) {
        this.tableData = data.results
        this.tableHeader = data.header
      }
    }
  }
</script>
<style scoped>

</style>
